import React, { useContext } from 'react';
import { ColorPicker } from 'antd';
import BtnGroup from './components/BtnGroup';
import { Color } from 'antd/es/color-picker';
import { StatusContext } from '@/views/MaterialsView/context';

interface ColorEditorProps {
  configKey: string;
  id: string;
  status: string;
  isShow: boolean;
  editCom: React.FC<any>; // 假设editCom是一个React组件类型
}

const ColorEditor: React.FC<ColorEditorProps> = ({ configKey, status }) => {
  // const [color, setColor] = useState(status);
  const { updateStatus } = useContext(StatusContext);

  const changeColor = (value: Color, css: string) => {
    console.log(value, css);
    // setColor(css);
    updateStatus(configKey, css);
  };

  return (
    <BtnGroup title={`${configKey === 'titleColor' ? '标题' : '描述'}颜色`} status={status}>
      <ColorPicker value={status} onChange={changeColor} />
    </BtnGroup>
  );
};

export default ColorEditor;
